<template>
  <div class="app-container">
    <el-card style=" padding: 10px; " shadow="hover">
      <template #header><span class="title"><div class="emoji-container">🧍‍</div>人员总览</span></template>
      <div ref="gangwei" :style="{ height: '600px', width: width }"/>
    </el-card>
    <el-card style=" padding: 10px; margin-top: -220px" shadow="hover">
      <template #header><span class="title"><div class="emoji-container">🏆‍</div>岗位总览</span></template>
      <div :style="{ width: width }">
        <el-tabs v-model="activePost">
          <el-tab-pane v-for="item in postList" :label="item.postName" :name="item.postId" lazy>
            <el-table :data="postUserMap[item.postId]" height='400px' max-height="400px" stripe>
              <el-table-column label="姓名" prop="nickName"></el-table-column>
              <el-table-column label="性别" prop="sex">
                <template v-slot="{row}">
                  {{row.sex === '0' ? '男':'女'}}
                </template>
              </el-table-column>
              <el-table-column label="勋章" prop="userAchieveVos">
                <template v-slot="{row}">
                  <div style="overflow-y: auto; text-wrap: none">
                    <el-image v-for='item1 in row.userAchieveVos' :src="item1.path" :title="item1.achieveName" style="height: 30px; padding: 2px 5px" ></el-image>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <el-card style=" padding: 10px; " shadow="hover ">
      <template #header><span class="title"><div class="emoji-container">💪</div>训练总览</span></template>
      <el-form inline>
        <el-form-item label="人员" prop="userId">
          <el-select v-model="trainQueryParams.userId" placeholder="请输入人员" clearable filterable
                     @keyup.enter.native="handleQueryTrain">
            <el-option v-for="item in options.userList" :label="item.nickName" :value="item.userId" :key="item.userId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围" prop="userId">
          <el-date-picker v-model="trainQueryParams.dateRange" type="daterange" align="right" unlink-panels
                          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                          :picker-options="pickerOptions"
                          value-format="yyyy-MM-dd" clearable @keyup.enter.native="handleQueryTrain">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="12">
          <div ref="zxzb1" :style="{ height: height, width: width }"/>
        </el-col>
        <el-col :span="12">
          <div ref="zxzb2" :style="{ height: height, width: width }"/>
        </el-col>
      </el-row>
      <el-divider border-style="double"/>
      <div ref="trainLineChart" :style="{ height: height, width: width }"/>
    </el-card>
    <div>
      <div class="container" style="width: 40%;box-sizing: border-box;padding: 5px; display: inline-block;vertical-align: top;">
        <el-card style="" shadow="hover">
          <template #header><span class="title"><div class="emoji-container">🙋</div>人员训练数量</span></template>
          <div class="infinite-table">
            <div>
              <div style="width: 43.3%;" class="infinite-table-header">姓名</div>
              <div style="width: 43.3%;" class="infinite-table-header">岗位</div>
              <div style="width: 13.3%;" class="infinite-table-header">训练数量</div>
            </div>
            <div class="infinite-table-body" v-infinite-scroll="loadTrainPaperList"
                 :infinite-scroll-disabled="userRanking.loading || userRanking.noMore">
              <div class="infinite-table-row" v-for="item in userRanking.data">
                <div style="width: 43.3%;" class="infinite-table-cell">{{ item.name || 'test01' }}</div>
                <div style="width: 43.3%;" class="infinite-table-cell">{{ item.postId | postFilter }}</div>
                <div style="width: 13.3%; text-align: center" class="infinite-table-cell">{{ item.num }}</div>
              </div>
            </div>
            <div style="text-align: center;height: 20px">
              <i class="el-icon-loading" v-if="userRanking.loading"></i>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container" style="width: 30%;box-sizing: border-box;padding: 5px; display: inline-block;vertical-align: top;">
        <el-card style="" shadow="hover">
          <template #header><span class="title"><div class="emoji-container">📋️</div>常用模板</span></template>
          <el-row :style="{ height: height, width: '100%', display: 'inline-block', verticalAlign: 'top' }">
            <el-table stripe :data="commonTemplates.data" :max-height="height" >
              <el-table-column show-overflow-tooltip prop="moduleName" label="模板名称"></el-table-column>
              <el-table-column show-overflow-tooltip prop="countNum" label="使用次数" align="center"></el-table-column>
              <el-table-column show-overflow-tooltip prop="errorNum" label="错题数量" align="center"></el-table-column>
              <el-table-column show-overflow-tooltip prop="errorRate" label="错题率" align="center"></el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </div>
      <div class="container" style="width: 30%;box-sizing: border-box;padding: 5px; display: inline-block;vertical-align: top;">
        <el-card style="" shadow="hover">
          <template #header><span class="title"><div class="emoji-container">⭕️</div>错题数量占比</span></template>
          <div ref="trainErrorProportion"
               :style="{ height: height, width: '100%', display: 'inline-block', verticalAlign: 'top' }"></div>
        </el-card>
      </div>
    </div>
    <div>
      <el-card style="" shadow="hover">
        <template #header><span class="title"><div class="emoji-container">📚️</div>模拟试卷列表</span></template>
        <div>
          <el-form inline>
            <el-form-item label="试卷名称">
              <el-input v-model="trainPaper.params.name" clearable/>
            </el-form-item>
            <el-form-item label="试卷模板">
              <el-select v-model="trainPaper.params.testPaperModuleId" filterable clearable>
                <el-option v-for="item in options.testPaperModuleList" :key="item.id" :value="item.id"
                           :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="考试人">
              <el-select v-model="trainPaper.params.userId" filterable clearable>
                <el-option v-for="item in options.userList" :key="item.userId" :label="item.nickName"
                           :value="item.userId"/>
              </el-select>
            </el-form-item>
            <el-button style="margin-top: 5px" type="primary" icon="el-icon-search" size="mini"
                       @click="handleTrainPaperList(true)">搜索
            </el-button>

          </el-form>

          <div class="infinite-table">
            <div>
              <div style="width: 25%;" class="infinite-table-header">模拟人</div>
              <div style="width: 25%;" class="infinite-table-header">名称</div>
              <div style="width: 25%;" class="infinite-table-header">部门</div>
              <div style="width: 25%;" class="infinite-table-header">岗位</div>
            </div>
            <div class="infinite-table-body" v-infinite-scroll="loadTrainPaperList"
                 :infinite-scroll-disabled="trainPaper.loading || trainPaper.noMore">
              <div class="infinite-table-row" v-for="item in trainPaper.data">
                <div style="width: 25%;" class="infinite-table-cell">{{ options.userMap[item.userId] }}</div>
                <div style="width: 25%;" class="infinite-table-cell">{{ item.name }}</div>
                <div style="width: 25%;" class="infinite-table-cell">{{ item.deptName }}</div>
                <div style="width: 25%;" class="infinite-table-cell">{{ item.postName }}</div>
              </div>
            </div>
            <div style="text-align: center;height: 20px">
              <i class="el-icon-loading" v-if="trainPaper.loading"></i>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <h1>✍考试总览</h1>
    <div class="container" style="width: 50%;box-sizing: border-box;padding: 5px; display: inline-block">
      <el-card style="" shadow="hover">
        <template #header><span class="title"><div class="emoji-container">📈</div>近三次考试排名</span></template>
        <el-carousel height="220px" direction="vertical" autoplay :interval="5000">
          <el-carousel-item v-for="(exam, index) in examRanking.data" :key="index">
            <h1 style="text-align: center ;height: 25px;margin: 10px;"><div class="emoji-container">📃</div>{{ exam.name }}</h1>
            <ul style="display: flex;flex-direction: column;flex-wrap: wrap;height: calc( 100% - 25px - 10px - 10px)">
              <template v-for="(paper, index) in exam.papers">
                <li style="display: flex; width: 300px">
                  <div class="emoji-container">
                    <template v-if="index === 0">
                      🥇
                    </template>
                    <template v-if="index === 1">
                      🥈
                    </template>
                    <template v-if="index === 2">
                      🥉
                    </template>
                  </div>
                  {{ paper.userName }}:{{ paper.gainGrade }}分
                </li>
              </template>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>

    <div class="container" style="width: 50%;box-sizing: border-box;padding: 5px; display: inline-block">
      <el-card style="" shadow="hover">
        <template #header><span class="title"><div class="emoji-container">💯</div>历史第一名</span></template>
        <el-carousel height="220px" direction="vertical" :autoplay="false" :interval="5000">
          <el-carousel-item v-for="(group, index) in historyExamFirst.data" :key="index">
            <div v-for="(paper, index1) in group" :key="index1" style="line-height: 30px;margin-top: 10px">
              <span style="padding-left: 20px;display: inline-block;width: 50%;margin:0;vertical-align: middle">📃{{ paper.paperName }}</span>
              <span style="display: inline-block;width: 30%; box-sizing: border-box;;vertical-align: middle"><span
                class="emoji-container">🥇</span>{{ paper.userName }}</span>
              <span style="display: inline-block;width: 20%; box-sizing: border-box;;vertical-align: middle">{{
                  paper.gainGrade
                }}分</span>
            </div>
          </el-carousel-item>
          ::after
        </el-carousel>
      </el-card>
    </div>
    <el-card style="" shadow="hover">
      <div class="container" :style="{ height: height }" ref="passingRate" style="display: inline-block; width: 70%">
      </div>
      <div class="container" :style="{ height: height }" ref="paperErrorProportion"
           style="display: inline-block; width: 30%"></div>
    </el-card>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
.container {
  padding: 10px 0;
  margin-top: 10px;
}

.title {
  font-weight: 1000;
  font-size: 22px;
  line-height: 22px;
}

.el-divider__text {
  font-size: 16px;
}

.infinite-table {
  padding: 10px 0;
  max-height: 320px;
  min-height: 320px;

  // 无限滚动的表头
  .infinite-table-header {
    padding-left: 20px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    color: rgb(81, 90, 110);
    background-color: #f2f2f2;
  }

  .infinite-table-body {
    max-height: 240px;
    overflow: auto;
  }
  .infinite-table-row {
    border-bottom: 1px solid #dfe6ec;
  }
  // 斑马
  .infinite-table-row:nth-child(even) {
    background-color: #f2f2f2;
  }

  // 无限滚动的单元格
  .infinite-table-cell {
    display: inline-block;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    padding: 10px;
    vertical-align: middle;
  }
}

.emoji-container {
  display: inline-block;
  padding: 0 5px;
  width: 40px;
  height: 30px;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}</style>
